<html>
    <head>
        <meta charset="utf-8">
        <title>添加多边形</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 
            var polyline = null;

            function init(){

                //1.创建map对象
                map = L.map("mapDiv", { 
                    layers: [
                        L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png')
                    ],      
                    center: [39.90,116.39],
                    zoom: 9
                });

                //2.定义多边形数组
                var latlngs = [
                    [ // first polygon
                        [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
                        [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
                    ],
                    [ // second polygon
                        [[41, -111.03],[45, -111.04],[45, -104.05],[41, -104.05]]
                        ]
                    ];

                //3.创建多边形并添加到地图上
                var polygon = L.polygon(latlngs, {
                    color   : 'red',
                }).addTo(map);
                map.fitBounds(polygon.getBounds());
            }

        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



